<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline" :form="form" @submit="handleSubmit">
            <a-form-item label="单据编号">
              <a-input allow-clear style="width: 180px" placeholder="请输入单据编号" v-model="billNo"></a-input>
            </a-form-item>
            <a-form-item label="关联编号">
              <a-input allow-clear style="width: 180px" placeholder="请输入单据编号" v-model="ksBillNo"></a-input>
            </a-form-item>
            <a-form-item label="样衣号">
              <a-input allow-clear style="width: 180px" placeholder="请输入样衣号" v-model="sampleCode"></a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="table">
      <a-table
        :scroll="{ x: 3400 }"
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="record => record.billNo"
        :row-class-name="record => (record.billFlag == '已审核' ? 'table-color' : '')"
      >
        <template slot="action" slot-scope="txt, record">
          <a style="margin: 5px" class="mr-10" @click="todet(record)" v-if="record.billFlag == '已审核' ? true : false"> <a-icon type="sync" />查看 </a>
          <a style="margin: 5px" class="mr-10" @click="tomodify(record)" v-if="record.billFlag == '已审核' ? false : true"> <a-icon type="edit" />编辑 </a>
          <!-- <a style="margin:5px;" class="mr-10" @click="checkCraftBill(record)"> <a-icon type="code" />审核 </a> -->
          <a style="margin: 5px" class="mr-10" @click="toprint(record)"> <a-icon type="code" />打印 </a>
        </template>
      </a-table>
      <!-- <modifydetail v-if="showDetail" :content="content" @closeFyDetail="closeFyDetail"></modifydetail> -->
    </a-card>
  </div>
</template>

<script>
import printSealSize from './printSealSize.vue'
import modifydetail from './modifydetail.vue'
import sealBillDetail from './sealBillDetail.vue'

import { getFyBill } from '@api/rd/index'

const columns = [
  {
    title: '单号',
    width: 150,
    dataIndex: 'billNo'
  },
  {
    title: '单据状态',
    width: 100,
    dataIndex: 'billFlag'
  },
  {
    title: '关联单号',
    width: 150,
    dataIndex: 'ksBillNo'
  },
  {
    title: '样衣码',
    width: 150,
    dataIndex: 'sampleCode'
  },
  {
    title: '品名',
    width: 150,
    dataIndex: 'sampleName'
  },
  {
    title: '品类',
    width: 100,
    dataIndex: 'sampleCat'
  },
  {
    title: '品牌',
    width: 100,
    dataIndex: 'brand'
  },
  {
    title: '款式',
    width: 150,
    dataIndex: 'styleId'
  },
  {
    title: '厂家',
    width: 100,
    dataIndex: 'factory'
  },
  {
    title: '波段',
    width: 100,
    dataIndex: 'band'
  },
  {
    title: '重新封样',
    width: 100,
    dataIndex: 'isReSeal'
  },
  {
    title: '质量登记',
    width: 100,
    dataIndex: 'qualitySign'
  },
  {
    title: '封样人',
    width: 100,
    dataIndex: 'sealer'
  },
  {
    title: '属性',
    width: 100,
    dataIndex: 'yyType'
  },
  {
    title: '封样日期',
    width: 200,
    dataIndex: 'audDate'
  },
  {
    title: '审核人',
    width: 150,
    dataIndex: 'auder'
  },
  {
    title: '业务员审核时间',
    width: 200,
    dataIndex: 'audDateYwy'
  },
  {
    title: '业务员',
    width: 150,
    dataIndex: 'auderYwy'
  },
  {
    title: '录入日期',
    width: 200,
    dataIndex: 'inputDate'
  },
  {
    title: '录入人',
    width: 150,
    dataIndex: 'inputor'
  },
  {
    title: '回样单号',
    width: 150,
    dataIndex: 'hyBillNo'
  },
  {
    title: '外发单号',
    width: 150,
    dataIndex: 'wfBillNo'
  },
  {
    title: '特殊工艺',
    width: 200,
    dataIndex: 'reqType'
  },
  {
    title: '操作',
    width: 200,
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    align: 'center'
  }
]
export default {
  components: {
    printSealSize,
    modifydetail,
    sealBillDetail
  },
  data() {
    return {
      columns,
      billNo: '',
      ksBillNo: '',
      sampleCode: '',
      showDetail: false,
      dataSource: [],
      loading: false,
      form: this.$form.createForm(this),
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    sessionStorage.removeItem('current')
    this.loadData()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      sessionStorage.setItem('current', this.pagination.current)
      this.loadData()
    },
    todet(record) {
      this.$router.push({ path: '/seal/todet', query: { billNo: record.billNo, ksBillNo: record.ksBillNo } })
    },
    tomodify(record) {
      //this.showDetail = true
      this.$router.push({ path: '/seal/tomodify', query: { billNo: record.billNo, ksBillNo: record.ksBillNo } })
      //this.content = record
    },
    toprint(record) {
      this.$router.push({ path: '/seal/toprint', query: { billNo: record.billNo, ksBillNo: record.ksBillNo, sampleCode: record.sampleCode } })
    },
    // closeFyDetail() {
    //   this.showDetail = false
    // },
    async loadData(key) {
      if (sessionStorage.getItem('current')) {
        this.pagination.current = Number(sessionStorage.getItem('current'))
      }
      this.loading = true
      if (key) {
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (this.billNo) {
        params.billNo = this.billNo
      }
      if (this.ksBillNo) {
        params.ksBillNo = this.ksBillNo
      }
      if (this.sampleCode) {
        params.sampleCode = this.sampleCode
      }
      try {
        const res = await getFyBill(params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.dataSource.forEach(v => {
            if (v.billFlag == 'S') {
              v.billFlag = '未审核'
            } else if (v.billFlag == 'Y') {
              v.billFlag = '已审核'
            } else if (v.billFlag == '2') {
              v.billFlag = '跟单'
            } else if (v.billFlag == '3') {
              v.billFlag = '工艺'
            }
          })
          this.pagination.total = res.data.total
          console.log(this.dataSource)
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取封样单列表失败!')
          }
        }
      } catch (error) {
        this.$message.error('获取封样单列表失败!')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
.table .table-color {
  color: #0cce88;
}
</style>